<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
	<title>店员管理</title>
	<meta name="decorator" content="default"/>
	<style type="text/css">
		fieldset{
			display:inline-block;width:100%;
		}
		#showPhoto{
			width:240px;height:300px;border-radius:5px;
		}
	</style>
	<script type="text/javascript">
		var photoUploading = false;
		$(document).ready(function() {
			$("#inputForm").validate({
				submitHandler: function(form){
					if(photoUploading) {
						showTip('正在上传图片，请稍等...');
						return;
					}
					loading('正在提交，请稍等...');
					form.submit();
				},
				rules:{
					"salary": "ifMoney",
					"mobile": {
						isMobile: "#mobile"
	                }
	            },
				errorContainer: "#messageBox",
				errorPlacement: function(error, element) {
					$("#messageBox").text("输入有误，请先更正。");
					if (element.is(":checkbox")||element.is(":radio")){
						error.appendTo(element.parent().parent());
					} else {
						error.insertAfter(element);
					}
				},
				messages: {
					mobile:"手机号码格式有误！"
				}
			});
			$("#photoFile").live('change', function(){
				imageUpload();
				global.displayAsImage(this, "showPhoto");
				$(this).val();
			});
		});
		function imageUpload(){
			photoUploading = true;
			$.ajaxFileUpload({
					url:'${ctx}/common/upload/picture',
					secureuri:false,
					fileElementId:'photoFile',
					dataType: 'json',
					beforeSend:function()
					{
						$("#loading").show();
					},
					complete:function()
					{
						$("#loading").hide();
					},				
					success: function (data, status)
					{
						photoUploading = false;
						$("#photo").val(data.image);
						showTip('图片上传完成');
					},
					error: function (data, status, e)
					{
						showTip(e);
					}
				}
			);
            return false;
		}
	</script>
</head>
<body>
	<form:form id="inputForm" class="form-input" modelAttribute="employee" action="${ctx}/employee/employee/save" method="post">
		<form:hidden path="id"/>
		<form:hidden path="store.id" value="${fns:getStore().id}"/>
		<div class="icon-buttons">
			<a href="${ctx}/employee/employee/detail?id=${employee.id}" data-icon="back" data-iconpos="notext" data-role="button" data-inline="true">返回</a>
			<input id="btnSubmit" data-icon="check" data-iconpos="notext" type="submit" value="保 存" data-inline="true"/>
		</div>
		<tags:message content="${message}"/>
		<div data-role="fieldcontain">
   			<label for="name">姓名:</label>
    		<form:input path="name" class="required"/>
		</div>
		<div data-role="fieldcontain">
			<fieldset data-role="controlgroup" data-type="horizontal" data-inline="true">
				<legend>性别:</legend>
				<form:radiobuttons path="gender" items="${fns:getDictMap('gender')}"/>
			</fieldset>
		</div>
		<div data-role="fieldcontain">
			<label for="birthday">生日:</label>
			<input type="date" id="birthday" value="${employee.birthday}" name="birthday"  class="required"/>
		</div>
		<div data-role="fieldcontain">
			<label for="mobile">手机:</label>
			<form:input type="tel" path="mobile" htmlEscape="false" maxlength="11" class="required"/>
		</div>
		<div data-role="fieldcontain">
			<label for="storeRole.id">职位:</label>
			<form:select path="storeRole.id" data-native-menu="false" items="${fns:getStoreRoleList()}"></form:select>
		</div>
		<div data-role="fieldcontain">
			<label for="salary">工资(元):</label>
			<form:input type="number" path="salary" htmlEscape="false" class="required"/>
		</div>
		<div data-role="fieldcontain">
			<label for="sfzh">身份证号:</label>
			<form:input path="sfzh" htmlEscape="false" maxlength="32" class="required"/>
		</div>
		<div data-role="fieldcontain">
			<label for="jzdz">居住地址:</label>
			<form:textarea path="jzdz" htmlEscape="false" maxlength="512"/>
		</div>
		<div data-role="fieldcontain">
			<form:hidden path="photo" class="required"/>
			<label for="photoFile">员工照片:</label>
			<input type="file" id="photoFile" name="file" accept="image/*" capture="camera">
		</div>
		<div class="middleCls">
			<img id="showPhoto"  alt="员工照片" src="${ossPath}${employee.photo}">
		</div>
	</form:form>
</body>
</html>
